<template>
  <div>
    <sys-dialog
      :title="assignDialog.title"
      :width="assignDialog.width"
      :height="assignDialog.height"
      :visible="assignDialog.visible"
      @onConfirm="onAssignConfirm"
      @onClose="onAssignClose">
      <div slot="content">
        <el-table :height="assignWidth" :data="assginRoleList" border stripe>
          <el-table-column width="50" align="center" label="选中">
            <template slot-scope="scope">
              <el-radio
                v-model="selectRoleId"
                :label="scope.row.id"
                @change="getSlectRole(scope.row)">
                {{ '' }}
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="角色名称"></el-table-column>
          <el-table-column prop="remark" label="角色备注"></el-table-column>
        </el-table>
        <Pagination
          :size.sync="roleParm.pageSize"
          :page.sync="roleParm.currentPage"
          :total="roleParm.total"
          :callback="assignRoleList"></Pagination>
      </div>
    </sys-dialog>
  </div>
</template>

<script>
import {
  assignRoleListApi,
  getRoleIdByUserIdApi,
  assignRoleSaveApi
} from '@/api/user'
import SysDialog from '@/components/system/SysDialog'
import Pagination from '@/components/Pagination'
export default {
  components: {
    SysDialog,
    Pagination
  },

  data() {
    return {
      //分配角色弹框属性
      assignDialog: {
        title: '',
        width: 800,
        height: 400,
        visible: false
      },
      //被选中的角色id
      selectRoleId: '',
      assginRoleList: [],
      //角色列表高度
      assignWidth: 0,
      //分配角色列表查询参数
      roleParm: {
        currentPage: 1,
        pageSize: 10,
        userId: '',
        total: 0
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 角色列表的高度，因为窗口是固定的，所以这个使用固定值最好
      // this.assignWidth = window.innerHeight - 360
      this.assignWidth = 360
    })
  },
  methods: {
    async show(row) {
      //防止回显时出问题
      this.selectRoleId = ''
      this.selectUserId = ''
      //被分配用户的id
      this.selectUserId = row.id
      this.assignDialog.visible = true
      this.assignDialog.title = '为【' + row.loginName + '】分配角色'
      // 查询当前系统登录用户的所有角色
      this.assignRoleList()
      // 获取当前被分配用户的角色id
      let parms = {
        userId: row.id
      }
      let resIds = await getRoleIdByUserIdApi(parms)
      // console.log(resIds)
      if (resIds.data) {
        this.selectRoleId = resIds.data.roleId
      }
    },
    // 获取角色列表
    async assignRoleList() {
      this.roleParm.userId = this.$store.getters.userId
      let res = await assignRoleListApi(this.roleParm)
      if (res && res.code === 200) {
        this.assginRoleList = res.data.records
        this.roleParm.total = res.data.total
      }
    },
    //分配角色弹框取消事件
    onAssignClose() {
      this.assignDialog.visible = false
    },
    //分配角色弹框确认事件
    async onAssignConfirm() {
      if (!this.selectRoleId) {
        this.$message.warning('请分配角色!')
        return
      }
      let parm = {
        roleId: this.selectRoleId,
        userId: this.selectUserId
      }
      let res = await assignRoleSaveApi(parm)
      if (res && res.code === 200) {
        this.$message.success(res.msg)
        this.assignDialog.visible = false
      }
    },
    //角色选择事件
    getSlectRole(row) {
      console.log(row)
      this.selectRoleId = row.id
    },
    //页容量改变的时候触发
    assignsizeChange(val) {
      console.log(val)
      this.roleParm.pageSize = val
      this.assignRoleList()
    },
    //页数改变的时候触发
    assingcurrentChange(val) {
      console.log(val)
      this.roleParm.currentPage = val
      this.assignRoleList()
    }
  }
}
</script>
<style lang="scss" scoped></style>
